<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <title>扫码点餐-菜单</title>

</head>
<body>
	<div id="menu">
		<div class="menu_header">
			<span class="current_num">当前桌号:<span class="cnum"></span></span>
			<span class="people_num">
				人数:<span class="pnum"></span>人
				<i class="m_bj"></i>
			</span>
			<div class="con_btn">
				<span class="menu_btn" onclick="show_menuL()">
					菜 单
					<i class="icon"></i>
				</span>
				<span class="Already_btn" onclick="order()">
					已下单
					<i class="icon"></i>
				</span>
				<span class="vip_btn" onclick="vip()">
					会 员
					<i class="icon"></i>
				</span>
			</div>
		</div>
		<div class="menu_con">
			<div class="overlay" onclick="pullHide()"></div>
			<div class="menu_left" id="menuLeft">
				<ul class="listCon">
				</ul>
				<span class="listCon_pull" onclick="pullShow()">
					<img src="images/classification.png"/>
					分类
				</span>
			</div >
			<ul class="conList" id="menuRight">

			</ul>
			<div class="show_details">
				<img class="close" onclick="de_close()" src="images/close.png"/>
				<h3 class="deta_title"></h3>
				<input type="hidden" name="dish_id" id="dish_id" value="" />
				<!--<div class="practice choice_List">-->
					<!--<h4><i class="attribute_title">做法</i><span class="choice">(必选)</span>:</h4>-->
					<!--<div class="choice_prac">-->
						<!--<span></span>-->
					<!--</div>-->
				<!--</div>-->
				<!--<div class="feed">-->
					<!--<h4><i class="attribute_title">加料</i>(可选):</h4>-->
					<!--<div class="choice_feed">-->
						<!--<span></span>-->
					<!--</div>-->
				<!--</div>-->
				<div class="ft_con">
					<span class="Current_price">￥<i></i></span>
					<button class="selected" onclick="addcar()">选好了</button>
				</div>
			</div>
			<button class="shoppingCar" onclick="goCar()">
				<span class="Carnum"></span>
				<i class="icon"></i>
				购物车
			</button>
		</div>
	</div>
    <input type="hidden" name="zf" id="zf" value="" />
    <input type="hidden" name="carlist" id="carlist" value="" />


<script type="text/javascript">
	 $(function () {
        (function ($) {
            $.getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
        })
        (jQuery);
        $(".cnum").html($.getUrlParam('znum'));
        $(".pnum").html($.getUrlParam('pnum'));
        znum=$(".cnum").html();
        pnum=$(".pnum").html();

		//获取商品
		getGoods();
		shownum();
    })
	 //获取当前购物车内容
	 function getcart(){
	 	$.ajax({
	        	url:url() + "index.php/Api/Car/carList",
            	dataType:"json",
            	type:"get",
            	success:function (data){
            		console.log(data);
                	if (data.state == 1) { // 状态200返回数据
            			console.log(data.data);
            			var count=0
            			$.each(data.data, function (i, items) {

            				$(".txt_name").each(function (){
								if($(this).text()==items.good_name){
									var num=$(this).closest('.ullistCon').find(".show_num").text()
										num++
										$(this).closest('.ullistCon').find(".show_num").text(num)
									//判断数量
									if($(this).closest('.ullistCon').find(".show_num").text()=="" || parseInt($(this).closest('.ullistCon').find(".show_num").text())<=0 ){
						        		$(this).closest('.ullistCon').find(".show_num").hide(100)
						        	}else {
						        		$(this).closest('.ullistCon').find(".show_num").show(100)
						        	}
								}
							})

            				carnum()
            			})
                	}else if(data.state==-1){
//              	    window.location.href=url()+"index.php/Api/WeChat/start";
					}
                }
	        });

	 }

	 //左右联动
	 function showscroll(){

		$('#menuLeft .menu-left-li').on('click',function (e) {
    		var i = $(this).index();
    		var t = $('.menu_con').scrollTop()

    		$('#menuLeft .menu-left-li').eq(i).addClass('ons').siblings().removeClass('ons');

    		$('.menu_con').scrollTop( $('#menuRight .list').eq(i).offset().top + t);

    	})
    	//左边联动

		var heightArr = [];
    	for (var i = 0; i < $('#menuRight .list').length; i++) {
    		heightArr.push($('#menuRight .list').eq(i).offset().top);
    	}
    	// 元素相对窗口顶部偏移量存成数组
		console.log(heightArr)
		//右边联动
		$('.menu_con').scroll(function () {
    		var t = $(this).scrollTop();
    		for (var i in heightArr) {
		        if ((t + $('.menu_con').width()/ 375 * 100 *1) >= heightArr[i]){
			       $('#menuLeft .menu-left-li').eq(i).addClass('ons').siblings().removeClass('ons');
			    }
	        }

     		$('#menuLeft').stop().animate({
     			scrollTop: $('#menuLeft .menu-left-li').height() * ($('#menuLeft .menu-left-li.ons').index()+0.5) - ($('#menuLeft').height()/2)
    		}, 200)
    		// 左侧按钮位置垂直居中
    	})
	 }


		//获取分类
		function show_menuL(){
			$('.menu_left .listCon').show();
			$('.menu_left .listCon_pull').hide();
			$('.overlay').show();
			getCategory()
		}

		//关闭分类
		function pullHide(){
			$('.menu_left .listCon').hide();
			$('.menu_left .listCon_pull').show();
			$('.overlay').hide();
		}
		//点击侧边分类按钮
		function pullShow(){
			$('.menu_left .listCon').show();
			$('.menu_left .listCon_pull').hide();
			$('.overlay').show();
			getCategory()
		}
//		function menubar(this1,id){
//			$(this1).addClass('ons').siblings().removeClass('ons')
//		}

		//获取分类
		function getCategory(){
			$.ajax({
	            url:url() + "index.php/Api/Goods/getCategory",
	            dataType:"json",
	            type:"get",
	            success:function (data) {
	                console.log(data);
	                if (data.state == 1) { // 状态200返回数据
	                    //请求成功时处理
	                    var html1 = '';
	                    for (var i in data.data) {
	                        html1 += '<li class="menu-left-li">' + data.data[i]['name'] + '</li>';
	                    }
	                    $('.menu_left .listCon').html('')
	                	$('.menu_left .listCon').html(html1)
	                	$('.menu_left .listCon li:first-of-type').addClass('ons')
						showscroll()
	                }else{
						alert('请求数据失败')
					}

	            }
	        })
		}

		//获取商品
		function getGoods(){
			$.ajax({
	            url:url() + "index.php?m=Api&c=Goods&a=getGoods",
	            dataType:"json",
	            type:"get",
	            success:function (data) {
	                console.log(data);
	                if (data.state == 1) { // 状态200返回数据
	                    //请求成功时处理
	                    var html1 = '';
	                    $.each(data.data, function (i, items) {
	                    	html1+='<li class="list">';
	                    	html1+='<header class="m_title">'+ items['category_name']+'</header>';
	                    	html1+='<input type="hidden" name="category_id" class="category_id" value="'+ items['category_id']+'" />';
	                    	$.each(items.goods, function (i, sitems) {
		                    	html1+='<section class="ullistCon">';
		                    	html1+='<img class="list_img" src="' + 'http://mytest.bndvip.com/Public' +sitems.image+'"/>';
		                    	html1+='<i class="show_num"></i>';
		                    	html1+='<div class="list_txt">';
		                    	html1+='<span class="txt_name">'+sitems.name+'</span>';
		                    	html1+='<span class="txt_price">￥<i>'+sitems.price+'</i></span>';
		                    	html1+='<span class="click_num" onclick="addTo(this,' + sitems.id+')">+</span>';
		                    	html1+='<input type="hidden" name="sitemsid" class="sitemsid" value="' + sitems.id+'" />';
		                    	html1+='</div>';

		                    	html1+='</section>';
	                    	})
	                    	html1+='</li>';
	                    })

	                	$('.conList').html(html1)
	                	showscroll()
	                	getcart();
	                }else{
						alert('请求数据失败')
					}

	            }
	        })
		}

		//商品加一
		function addTo(this2,id){
			var a = $(this2).parent().prev().text();
			var price = $(this2).prev().find('i').text();
//    		a++
//    		$(this2).parent().prev().text(a);
			$('.practice.choice_List').remove()

            $('.show_details').show(200)
            //获取商品属性
            $.ajax({
	            url:url() + "index.php/Api/Goods/getAttributes",
	            data:{'dishId':id},
	            dataType:"json",
	            type:"post",
	            success:function (data) {
	                console.log(data);
	                if (data.state == 1) { // 状态200返回数据
                        var html1 = '';
                        $.each(data.data, function (i, items) {
                            if (items['is_need']==1){
                                choice='不可选'
							}else if(items['is_need']==2){
                                choice='可选'
							}
                            var pracZ = items['attribute_value_name']
                            var pracTop=pracZ.split(',')
                            html1+='<div class="practice choice_List">'
                            html1+='<h4><i class="attribute_title">'+ items['attribute_name']+'</i><span class="choice">('+ choice+')</span>:</h4>'
                            html1+='<div class="choice_prac">'
                            html1 += '<span onclick="checkZ(this)">' + pracTop + '</span>';
                            html1+='</div>'
                            html1+='</div>'
                        })
	                	// $('.deta_title').html(data.data[0]['name'])
	                	$('.Current_price i').html(price)
	                	$('#dish_id').val(id)

//						var pracK = data.data[1]['attribute_value_name']
//    					var pracBtm=pracK.split(',')
	                    //请求成功时处理
// 	                    var html1 = '';
// //	                    var html2='';
// 	                    for (var i in pracTop) {
// 	                        html1 += '<span onclick="checkZ(this)">' + pracTop[i] + '</span>';
// //	                        html2+='<span onclick="checkB(this)">' + pracBtm[i] + '</span>'
// 	                    }
// 	                    $('.practice .attribute_title').html('')
// 	                    $('.practice .attribute_title').html(data.data[0]['attribute_name'])
// 	                    $('.choice_prac').html('')
	                	$('.ft_con').before(html1)
//	                	$('.choice_feed').html('')
//	                	$('.choice_feed').html(html2)
	                }else{
						alert('请求数据失败')
					}

	            }
	        })

		}
		//加入购物车
		function addcar(){
			var deID=parseInt($('#dish_id').val());
			if($('.choice_prac span').hasClass('on_show') == false){
				alert('未选择做法')
				return false;
			}else{

				$(".sitemsid").each(function () {
	            if (parseInt($(this).val()) == deID  ) {

	                var n = $(this).closest('.ullistCon').find(".show_num").text();
	                n++
	                console.log(n)
				$(this).closest('.ullistCon').find(".show_num").text(n)

				//判断数量
				if($(this).closest('.ullistCon').find(".show_num").text()=="" || parseInt($(this).closest('.ullistCon').find(".show_num").text())<=0 ){
	        		$(this).closest('.ullistCon').find(".show_num").hide(100)
	        	}else {
	        		$(this).closest('.ullistCon').find(".show_num").show(100)
	        	}
	        	//数据存储

		        category_name = $(this).closest('.list').find(".m_title").text();
		        category_id = $(this).closest('.list').find(".category_id").val();

		        good_name = $(this).closest('.ullistCon').find(".txt_name").text();
		        count = $(this).closest('.ullistCon').find(".show_num").text();
		        count = 1;
		        good_id = $(this).closest('.ullistCon').find(".sitemsid").val();
		        good_price = $(this).closest('.ullistCon').find(".txt_price i").text();
		        good_pic = $(this).closest('.ullistCon').find(".list_img").attr('src');
		        zfList=$('.choice_prac').find(".on_show").text();
		        jlList=$('.choice_feed').find(".on_show").text();
		        table_id=$(".cnum").html();

		        //添加到购物车
		        $.ajax({
		        	url:url() + "index.php/Api/Car/addCar",
		        	data:{
		        		'table_id':table_id,
		        		'category_name': category_name,
		        		'category_id': category_id,
		        		'good_name': good_name,
		        		'good_price': good_price,
		        		'good_pic': good_pic,
		        		'count': count,
		        		'good_id': good_id,
		        		'practice': zfList,
		        		'jlList':jlList
		        	},
	            	dataType:"json",
	            	type:"post",
	            	success:function (data){
	            		console.log(data);
	                	if (data.state == 1) { // 状态200返回数据
	            			console.log(data);
	                	}
	                }
		        });

				$('.show_details').hide(200)
				carnum()
	            }
	        })

			}

		}
		//做法选择
	 var show_check=false
		function checkZ(this4,e){
			let el=event.target.innerText;
//			$('#zf').val(el)
			if(show_check==false){
                $(this4).addClass('on_show').siblings().removeClass('on_show')
				show_check=true
			}else if(show_check==true){
                $(this4).removeClass('on_show')
                show_check=false
			}
		}
		//加料
//		function checkB(this5,e){
//			let el=event.target.innerText;
////			$('#zf').val(el)
//			$(this4).addClass('on_show').siblings().removeClass('on_show')
//		}

		//关闭菜品详情
		function de_close(){
			var deID=parseInt($('#dish_id').val());

			$(".sitemsid").each(function () {
//	            if (parseInt($(this).val()) == deID) {
//	                var n = $(this).closest('.ullistCon').find(".show_num").text();
//	                n--
//
//				if(n<0){
//					$(this).closest('.ullistCon').find(".show_num").text(0);
//				}else{
//					$(this).closest('.ullistCon').find(".show_num").text(n);
//					carnum()
//				}
//
//
//	            }
	            //判断数量
				if($(this).closest('.ullistCon').find(".show_num").text()=="" || parseInt($(this).closest('.ullistCon').find(".show_num").text())<=0 ){
	        		$(this).closest('.ullistCon').find(".show_num").hide(100)
	        	}else {
	        		$(this).closest('.ullistCon').find(".show_num").show(100)
	        	}

				$('.show_details').hide(200)
	        })
		}
		//显示数量
		function shownum(){
			if($('.show_num').text()=="" || parseInt($('.show_num').text())==0 ){
            		$(this).hide()
            	}else {
            		$(this).show()
            	}
		}

		//购物车数量显示
		function carnum() {
	        var conut = $('.Carnum').text();
	        conut++
      		$('.Carnum').text(conut)
      		var carnum=0;
      		$(".show_num").each(function (){
      			if ($(this).text()!== '' && $(this).text()>0) {
      				var num = $(this).closest('.ullistCon').find(".show_num").text();
      				carnum+=parseInt(num)
      				$('.Carnum').text(carnum)
      				if($('.Carnum').text()=="" || parseInt($('.Carnum').text())==0 ){
		        		$('.Carnum').hide()
		        	}else {
		        		$('.Carnum').show()
		        	}
      			}
      		})
	    }


		//去购物车
		function goCar(){
			if($('.Carnum').is(':hidden')){
                console.log('购物车暂时没有商品，请选择商品哦')
				return false
			}else {
                window.location.href = url() + "html/meal_new/shopping_car.html?pnum=" + pnum +"&znum="+ znum;
			}

		}
		//去订单
		function order(){
			window.location.href = url() + "html/meal_new/order.html";
		}
		function vip(){
			window.location.href = url() + "html/meal_new/vipCenter.html";
		}
</script>
</body>
</html>